<template>
  <div class="homePage">
    <a-carousel
      :autoPlay="true"
      animation-name="card"
      show-arrow="never"
      indicator-position="outer"
      :style="{
        width: '100%',
        height: '240px',
      }"
    >
      <a-carousel-item
        v-for="image in images"
        :style="{ width: '60%' }"
        :key="image.id"
      >
        <img
          :src="image"
          :style="{
            width: '100%',
          }"
        />
      </a-carousel-item>
    </a-carousel>
    <div class="mainCard" style="margin: 0 auto">
      <a-card
        class="leftCard"
        :style="{ width: '30%', height: '100%', marginRight: '2%' }"
        title="站内公告"
        :bordered="false"
      >
        <a-list :size="'large'">
          <a-list-item>
            <a-button type="text" class="customButton" @click="toUserNotice"
              >用户须知</a-button
            >
          </a-list-item>
          <a-list-item>
            <a-button type="text" class="customButton" @click="toQuestionStep">
              做题步骤</a-button
            >
          </a-list-item>
          <a-list-item>
            <a-button
              type="text"
              class="customButton"
              @click="toQuestionExplain"
            >
              题目说明</a-button
            >
          </a-list-item>
          <a-list-item>
            <a-button type="text" class="customButton" @click="toPostTip"
              >帖子说明</a-button
            >
          </a-list-item>
          <a-list-item>
            <a-button type="text" class="customButton" @click="toNoticeTips"
              >注意事项</a-button
            >
          </a-list-item>
        </a-list>
      </a-card>
      <a-card
        :style="{ width: '68%' }"
        title="千里之行，始于足下"
        :bordered="false"
      >
        <img
          src="https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A2%98%EF%BC%88%E6%96%B0%EF%BC%89.png"
          style="width: 100%; height: 100%"
        />
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();
const images = [
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp",
  "https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E8%BD%AE%E6%92%AD%2F%E7%A7%91%E5%A4%A7%E6%B8%85%E6%99%A8.jpg",
  "https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E8%BD%AE%E6%92%AD%2F%E7%A7%91%E5%A4%A7%E9%BB%84%E6%98%8F.jpg",
  "https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E8%BD%AE%E6%92%AD%2F%E7%A7%91%E5%A4%A7%E5%82%8D%E6%99%9A.jpg",
];
/**
 * 跳转到用户须知
 */
const toUserNotice = () => {
  router.push({
    path: "/userNotice",
  });
};

const toQuestionStep = () => {
  router.push({
    path: "/questionStep",
  });
};

const toQuestionExplain = () => {
  router.push({
    path: "/questionExplain",
  });
};

const toPostTip = () => {
  router.push({
    path: "/postTip",
  });
};

const toNoticeTips = () => {
  router.push({
    path: "/noticeTips",
  });
};
</script>

<style scoped>
.homePage {
  width: 80%;
  margin: 0 auto;
}
.customButton {
  font-size: 20px; /* 调整按钮文字大小为16px */
}
.mainCard {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: left;
  align-items: center;
  box-sizing: border-box;
  padding: 5px;
  background-color: var(--color-fill-2);
}
.leftCard {
  padding: 16px;
}
</style>
